<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="icon" type="image/png" href="/img/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Leon</title>
  </head>
  <body class="settingup">
    <main>
      <div id="feed">
        <p id="no-bubble" class="hide">
          You can start to interact with Leon, don't be shy.
        </p>
      </div>
      <div id="suggestions-container"></div>
      <div id="is-typing">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <div id="input-container">
        <div id="mic-container">
          <button id="mic-button"></button>
          <div id="sonar"></div>
        </div>
        <label for="utterance"></label>
        <input type="text" id="utterance" autocomplete="off" autofocus />
        <small>
          Use <kbd>↑</kbd> <kbd>↓</kbd> to browse history; <kbd>↵</kbd> to
          submit;
          <kbd>alt + c to listen.</kbd>
        </small>
      </div>
    </main>
    <footer>
      <div id="logo"></div>
      <div id="version">
        <small>v</small>
      </div>
      <div id="discord">
        <small class="italic">
          <a href="https://discord.gg/MNQqqKg" target="_blank"
            >Join us on Discord</a
          >
        </small>
      </div>
    </footer>
    <script type="module" src="/js/main.js"></script>
  </body>
</html>
